﻿@layout SettingsLayout
@page "/admin/settings/themes/"
@inject HttpClient _http
@inject IStringLocalizer<Resource> _localizer
@inject IJSRuntime JSRuntime

<PageTitle Title="@_localizer["themes"]" />

@if (CurrentTheme != null)
{
    <h1 class="section-title">@_localizer["themes"]</h1>
    <div class="section-content">
        <div class="themes">
            <div class="themes-item d-flex">
                <img src="@CurrentTheme.Cover" class="themes-thumbnail" alt="@CurrentTheme.Title"> <!-- 4:5 -->
                <div class="themes-info">
                    <h3 class="themes-title">@CurrentTheme.Title (@_localizer["current"])</h3>
                    <ul class="themes-meta d-flex">
                        <li class="themes-meta-item">@_localizer["version"] 2.1</li>
                        <li class="themes-meta-item">@_localizer["by"] <a href="#">John Doe</a></li>
                    </ul>
                    <p class="themes-desc">This is the default theme that comes with the Blogifier 3.0 There are some customization you might enjoy.</p>
                    <a class="btn btn-blogifier px-4" href="/admin/settings/customize/">@_localizer["customize"]</a>
                </div>
            </div>
            @foreach (var item in Themes)
            {
                <div class="themes-item d-flex">
                    <img src="@item.Cover" class="themes-thumbnail" alt="@item.Title">
                    <div class="themes-info">
                        <h3 class="themes-title">@item.Title</h3>
                        <ul class="themes-meta d-flex">
                            <li class="themes-meta-item">@_localizer["version"] 2.1</li>
                            <li class="themes-meta-item">@_localizer["by"] <a href="#">John Doe</a></li>
                        </ul>
                        <p class="themes-desc">This is the default theme that comes with the Blogifier 3.0 There are some customization you might enjoy.</p>
                        <div class="d-flex">
                            <button type="button" class="btn btn-default me-2" @onclick="()=> SelectTheme(item.Title)" @onclick:preventDefault>@_localizer["set-current-theme"]</button>
                            <button type="button" class="btn btn-default me-2" data-bs-toggle="tooltip" title="@_localizer["delete"]">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
}

<ToasterComponent @ref="Toaster" />

@code {
    protected Blog Blog { get; set; }
    protected List<ThemeItem> Themes { get; set; }
    protected ThemeItem CurrentTheme { get; set; }
    protected ToasterComponent Toaster;

    protected override async Task OnInitializedAsync()
    {
        await Load();
    }

    public async Task Load()
    {
        Themes = new List<ThemeItem>();

        Blog = await _http.GetFromJsonAsync<Blog>("api/blog");
        var allThemes = await _http.GetFromJsonAsync<IList<string>>($"api/storage/themes");

        foreach (var theme in allThemes)
        {
            if (theme.ToLower() == Blog.Theme.ToLower())
            {
                CurrentTheme = new ThemeItem
                {
                    Title = theme.Capitalize(),
                    IsCurrent = (Blog.Theme.ToLower() == theme.ToLower()),
                    Cover = await GetCover(theme)
                };
            }
            else
            {
                Themes.Add(new ThemeItem
                {
                    Title = theme.Capitalize(),
                    IsCurrent = (Blog.Theme.ToLower() == theme.ToLower()),
                    Cover = await GetCover(theme)
                });
            }
        }
    }

    protected async Task SelectTheme(string theme)
    {
        Blog.Theme = theme;
        Toaster.Toast(await _http.PutAsJsonAsync<Blog>($"api/blog", Blog));
        await Load();
    }

    private async Task<string> GetCover(string theme)
    {
        string slash = System.IO.Path.DirectorySeparatorChar.ToString();
        string file = $"wwwroot{slash}themes{slash}{theme}{slash}screenshot.png";
        var result = await _http.PutAsJsonAsync<string>($"api/storage/exists", file);

        if (result.IsSuccessStatusCode)
            return $"themes/{theme}/screenshot.png";
        else
            return "img/img-placeholder.png";
    }

    //bool showModal = false;
    //void ModalShow() => showModal = true;
    //void ModalCancel() => showModal = false;
}
